<script setup lang="ts">
import { NFlex } from "naive-ui";
import { NLayout } from "naive-ui";
import { NLayoutHeader } from "naive-ui";
import { NLayoutSider } from "naive-ui";
import { NLayoutContent } from "naive-ui";

import HomePageHeader from "@/components/HomePageHeader.vue";
import HomePageMenu from "@/components/HomePageMenu.vue";
</script>

<template>
  <n-layout class="w-full h-full>">
    <n-layout-header class="header">
      <n-flex justify="space-between" align="center" class="w-full h-full">
        <home-page-header></home-page-header>
      </n-flex>
    </n-layout-header>
    <n-layout has-sider class="w-full h-full">
      <n-layout-sider>
        <home-page-menu></home-page-menu>
      </n-layout-sider>
      <n-layout-content>
        <router-view></router-view>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<style scoped>
.header {
  height: 60px;
  width: 100%;
}
</style>
